<template>
  <div class="home-container">
    <!-- 头部 -->
    <div class="home-header">
      <div class="home-title">
        <img class="enterprise-logo" :src="enterprise.avatar" />
      </div>
      <div class="tab-box">
        <van-tabs v-model="activeName">
          <van-tab
            title="商品"
            name="a"
            :to="{ path: '/home/goods' }"
          ></van-tab>
          <van-tab
            title="评价"
            name="b"
            :to="{ path: '/home/evaluate' }"
          ></van-tab>
          <van-tab
            title="商家"
            name="c"
            :to="{ path: '/home/enterprise' }"
          ></van-tab>
        </van-tabs>
      </div>
    </div>

    <!-- 内容 -->
    <div class="home-content">
      <!-- 二级路由的出口 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { getEnterpriseInfo } from "@/api";

interface IEnterpsise {
  avatar?: string; // 头像
  bulletin?: string; // 通告
  date?: Array<string>; // 营业时间
  deliveryPrice?: number; // 配送费
  deliveryTime?: number;
  description?: string; // 配送描述
  id?: number; // id
  minPrice?: number; // 最低金额
  name?: string; // 店铺名称
  pics?: string[]; //图片
  score?: number; // 评分
  sellCount?: number; // 总销售量
  supports?: string[];
}

@Component
export default class extends Vue {
  // 数据
  activeName: string = "";
  enterprise: IEnterpsise = {}; // 商家信息

  async created(): Promise<void> {
    let res: any = await getEnterpriseInfo();

    console.log(res);
    this.enterprise = res.data.data;
  }
}
</script>

<style lang="scss" scoped>
// 如果需要@代替src 必须使用~@ scss映入css文件不需要url()
@import "~@/assets/style/theme.scss";
.home-container {
  .home-header {
    height: 200px;
    background-color: $baseColor1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .enterprise-logo {
      width: 100px;
      height: 100px;
      border-radius: 10px;
      object-fit: cover;
    }
  }

  .home-content {
    height: 100%;
  }
}
</style>